/* pages/myCars/myCars.wxss */
@import "/style/common.wxss";

.myCars-page {




  
  .banner-box {
    width: 100%;
    height: 100rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    // background: linear-gradient(97.29deg, #D9CFFF 7.88%, #F3A6FF 55.39%, #7926FF 94.6%);
    background: #F1F1FF;

    &>image {
      width: 100%;
      height: 330rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .content-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0 20rpx;
      height: 315rpx;
      // height: 400rpx;
      // background: red;
      background: #F1F1FF;
      z-index: 2;
    }

    .nav-box {
      width: 100%;
      // width: 70%;
      display: flex;
      flex-direction: column;
      align-items:flex-start;

  

      .nav {
        width: 70%;
        height: 65rpx;
        display: flex;
        border-radius: 65rpx;
        // border: 1px solid;
        margin-top: 20rpx;
        align-items: center;
        background: white;
        padding: 0 10px;
        


        image {
          width: 35rpx;
          height: 35rpx;
        }

        input {
          // flex: 1;
          font-size: 30rpx;
          margin-left: 20rpx;
          // border:rgba(241, 241, 255, 1) 
        }
      }
    }



    .contain {
      display: flex;
      justify-content: space-around;
      margin-top: 55rpx;
      // color: red;
      // color: rgba(19, 31, 137, 1);
      font-size: 32rpx;
      background: F1F1FF;

      

      view {
        text-align: center;
        color: rgba(19, 31, 137, 1);
      }
    }
  }

  .list-box {
    width: 100%;
    box-sizing: border-box;
    // padding-top: 360rpx;
    padding-top: 330rpx;

    .recycle-item {
      width: 100%;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      padding: 0 20rpx;

      .item-box {
        width: 100%;
        background:rgba(241, 241, 255, 1); 
        border-radius: 6rpx;
        padding: 0 13rpx 13rpx;

        .top-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15rpx;

          &>view {
            font-size: 30rpx;

            &:first-of-type {
              font-weight: bold;
            }

            &:nth-of-type(2) {
              color: rgba(19, 31, 137, 1);
            }
          }
        }

        .content {
          background: white;
          border-radius: 4rpx;
          padding: 15rpx;

          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>view {
              font-size: 30rpx;
              margin-bottom: 5rpx;

              &:first-of-type {
                width: 140rpx;
                font-size: 28rpx;
                color: rgba(102, 102, 102, 1);
              }

              &:nth-of-type(2) {
                flex: 1;
              }
            }

            .btn {
              display: flex;
              align-items: center;
              border: 1rpx solid rgba(94, 37, 255, 1);
              padding: 10rpx 20rpx;
              border-radius: 12rpx;

              image {
                width: 30rpx;
                height: 30rpx;
              }

              text {
                margin-left: 10rpx;
                color: rgba(94, 37, 255, 1);
              }
            }
          }
        }

        .btn-box {
          display: flex;
          justify-content: flex-start;
          padding-top: 20rpx;
          padding-bottom: 7rpx;

          .line-btn {
            margin-right: 20rpx;
          }
          .pickeritem{
            width: 200rpx;
            border: 1rpx solid gray;
            font-size: 28rpx;
            text-align: center;
            color:rgba(102, 102, 102, 1);
            border-radius: 12rpx;
            padding: 10rpx 5rpx 10rpx 5rpx;
          }
        }
      }
    }
  }

  .mask {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;

    .form {
      width: 80%;
      background: white;
      border-radius: 12rpx;


      .title {
        padding: 30rpx;
        font-weight: bold;
      }

      .center {
        padding: 20rpx 0;
      }

      .input-box {
        padding: 20rpx 50rpx;
        display: flex;
        align-items: center;

        // margin-top: 50rpx;
        &:last-of-type {
          // margin-top: 0;
        }

        view {
          display: block;
          width: 160rpx;
          text-align: right;
        }

        input {
          display: block;
          border-radius: 65rpx;
          border: 1rpx solid #999999;
          padding: 0 30rpx;
          height: 65rpx;
          line-height: 65rpx;
          flex: 1;
        }
      }

      .btn-box {
        display: flex;

        &>view {
          flex: 1;
          text-align: center;
          padding: 30rpx 0;

          &:last-of-type {
            color: rgba(19, 31, 137, 1);
          }
        }
      }
    }
  }

  .no-data {
    height: calc(100vh - 120rpx);
    padding-top: 40vh;
  }




/* pages/character/character.wxss */
// page {
//   position: relative;
// }
.wrap {
  border-bottom: 1px solid #000;
  background-color: #fff;
  position: fixed;
  color: #777777;
  width: 100vw;
  display: flex;
  z-index: 100;
}
.wrap .item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx;
  flex: 1;
}
.wrap .active {
  color: #F75194;
}
.selectWrapA{
  position: relative;
}
.selectWrap {
  color: #777777;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 90;
  background-color: #fff;
}
.selectWrap .selectItem {
  padding: 20rpx;
  border-bottom: 1px solid #dddddd;
}
.selectWrap .active {
  color: #F75194;
}
.shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 4;
  background-color: #4C4C4C;
  opacity: 0.6;
}
.numwrap {
  padding-top: 82rpx;
  height: calc(100vh - 82rpx);
}
@keyframes slidown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.slidown {
  display: block;
  height: 100rpx;
  animation: slidown 0.1s ease-in both;
}
@keyframes slidup {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
.slidup {
  display: block;
  animation: slidup 0.1s ease-in both;
}







  
}